<template>
  <div class="home">
	 <!-- 导航栏 -->
	  <div id="header" :class="myClass?'active':''"></div>
	  
	  <!-- 轮播图 -->
	  <van-swipe  class="my-swipe" :autoplay="3000" indicator-color="#1BAEAE">
	    <van-swipe-item  v-for="item in myswiper" :key="item.carouselUrl">
			<img :src="item.carouselUrl">
	    </van-swipe-item>
	  </van-swipe>
	  
	  <!-- 宫格 -->
	  <van-grid :column-num="5">
	    <van-grid-item v-for="value in 10" :key="value" icon="photo-o" text="文字" />
	  </van-grid>
	  
	 <Goods :mydata="newg">
		 <template #title>新品上线</template>
	  </Goods>
	  <Goods :mydata="hotg">
		 <template #title>热门商品</template>
	  </Goods>
	  <Goods :mydata="recommendg">
		  <template #title>最热推销</template>
	  </Goods>
	  
	  <!-- <Goods mytitle="新品上线"></Goods>
	  <Goods mytitle="热门商品"></Goods>
	  <Goods mytitle="最热推销"></Goods> -->
  </div>
</template>

<script>
import Goods from "@/components/Goods.vue";
export default {
  name: 'Home',
  data(){
	  return {
		  myClass:false,
		  myswiper:[],
		  hotg:[],
		  recommendg:[],
		  newg:[]
	  }
  },
  created(){
	this.getData();
  },
  mounted(){//组件DOM渲染完成的时候，添加scroll事件
	window.addEventListener("scroll",this.showHeader);
  },
  methods:{
	showHeader(){
		let html=document.documentElement||document.body;
		if(html.scrollTop>50){
			this.myClass=true;
		}else{
			this.myClass=false;
		}
	},
	getData(){
	   this.$http.getHomeData().then(data=>{
		   console.log(data);
		   if(data.resultCode==200){
			   this.myswiper=data.data.carousels;//轮播图数据
			   this.hotg=data.data.hotGoodses;//最热
			   this.newg=data.data.newGoodses;//新品上线
			   this.recommendg=data.data.recommendGoodses;//推销
			   console.log(this.hotg);
			   console.log(this.newg);
			   console.log(this.recommendg)
		   }
	   }).catch(err=>{
		   console.log(err);
	   })	 
	}
  },
  destroyed(){//组件销毁的时候移除事件
	  window.removeEventListener("scroll",this.showHeader);
  },
  components:{
	  Goods
  }
}
</script>
<style lang="less" scoped>
	.home{
		background-color: #E0E0E0;
		margin-bottom:80px;
	}
	#header{
		width:100%;
		height:50px;
		opacity: 0.5;
		background-color: #1BAEAE;
		position: fixed;
		left:0;
		top:0;
		z-index:9999;
	}
	#header.active{
		opacity: 1;
	}
	.my-swipe .van-swipe-item {
		img{
			width:100%;
		}
	}
</style>
